<template>
	<view class="l_pages">
		<jnavbar :title="'合并账号'"></jnavbar>
		<view class="header">
			<text>当前ID绑定的手机号：</text>
			<text>{{userInfo.mobile}}</text>
		</view>
		<text class="title">请选择一个主账号作为合并对象</text>
		<u-radio-group v-model="value">
			<view class="list">
				<view class="item" v-for="(item, i) in list" :key="i" v-bind:class="item.id == value ? '' : 'def'">
					<view class="item_head">
						<image :src="item.picurl"></image>
						<view class="item_name">
							<text>姓名:{{ item.nickname }}</text>
							<text>ID:{{ item.id }}</text>
						</view>
						<text>主账号</text>
					</view>
					<view class="item_content">
						<view>
							<text>{{ item.total }}</text>
							<text>余额(元)</text>
						</view>
						<view>
							<text>{{ item.integral_total }}</text>
							<text>积分</text>
						</view>
						<view>
							<text>{{ item.order_count }}</text>
							<text>订单数</text>
						</view>
						<view>
							<text>{{ item.coupon_count }}</text>
							<text>优惠卷</text>
						</view>
					</view>
					<view class="item_foot">
						<text>分销团队:{{ item.team_count }}人</text>
						<text v-if="item.userWx">来源:{{ item.userWx.type == 1 ? '微信小程序' : '微信公众号' }}</text>
						<u-radio :name="item.id"><text class="foot_text">设为主账号</text></u-radio>
					</view>
				</view>
			</view>
		</u-radio-group>
		<text class="title ar">只会保存主账户的分销团队信息！请谨慎选择是否合并！</text>
		<u-button :custom-style="CustomStyle" v-if="value" @click="upUserData">立即合并账号</u-button>
	</view>
</template>

<script>
	import {mapState, mapMutations} from 'vuex';
	
export default {
	data() {
		return {
			list: [],
			value: null,
			CustomStyle: {
				width: '712rpx',
				height: '80rpx',
				background: 'linear-gradient(90deg, #FE8E0A 0%, #FF5011 100%)',
				'box-shadow': '0px 6rpx 14rpx rgba(254, 142, 10, 0.36)',
				'border-radius': '46rpx',
				color: '#FFFFFF',
				'margin-top': '110rpx'
			}
		};
	},
	async onLoad() {
		await this.$getWx
		this.getMorePhone();
	},
	computed: {
		...mapState({
			userInfo: state => state.userInfo
		})
	},
	methods: {
		getMorePhone() {
			this.$http('/user/getMorePhone', {}, 'GET').then(res => {
				this.list = res.data.msg;
				this.value = this.list[0].id;
			});
		},
		upUserData() {
			let _this = this;
			uni.showModal({
				title: '提示',
				content: '选择当前主账号后，其他账号的分销信息将被清空（其他信息合并），是否确认执行合并？',
				success(e) {
					if (e.confirm) {
						_this.$http('/user/upUserData', {id: _this.value}, 'PUT').then(res => {
							uni.navigateBack();
						});
					}
				}
			});
		}
	}
};
</script>

<style lang="scss">
.header {
	width: 750rpx;
	height: 80rpx;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	color: #666666;
	text:last-child {
		color: #f7bb5b;
	}
}
.title {
	font-size: 24rpx;
	padding: 20rpx;
	&.ar {
		color: #ff4600;
		font-size: 28rpx;
	}
}
.list {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	.item {
		width: 710rpx;
		background: #ffffff;
		box-shadow: 0px 6rpx 12rpx rgba(19, 47, 98, 0.16);
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		.item_head {
			display: flex;
			align-items: center;
			padding: 20rpx;
			image {
				width: 80rpx;
				height: 80rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.item_name {
				display: flex;
				flex-direction: column;
			}
		}
		.item_content {
			display: flex;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #e4e4e4;
			view {
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				text:first-child {
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 50rpx;
					color: #ff4600;
				}
				text:last-child {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 400;
					line-height: 34rpx;
					color: #cbcbcb;
				}
			}
		}
		.item_foot {
			display: flex;
			align-items: center;
			height: 80rpx;
			justify-content: space-between;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #ff4600;
			padding-left: 20rpx;
			.foot_text {
				color: #ff4600;
				font-size: 28rpx;
			}
		}
	}
}
.def {
	text {
		color: #cbcbcb !important;
	}
}
</style>
